<template>
	<view class="passwordEdit">
		<view class="container">
			<uni-list>
				<uni-list-item>
					<template v-slot:header>
						<view class="label">原始密码</view>
					</template>
					<template v-slot:footer>
						<input type="password" class="sign-input" placeholder="请输入原始密码" placeholder-style="color: #bdbdbd;"
							v-model="old_passwd" />
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view class="label">新密码</view>
					</template>
					<template v-slot:footer>
						<input type="password" class="sign-input" placeholder="请输入新密码" placeholder-style="color: #bdbdbd;"
							v-model="new_passwd" />
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view class="label">确认密码</view>
					</template>
					<template v-slot:footer>
						<input type="password" class="sign-input" placeholder="请输入确认密码" placeholder-style="color: #bdbdbd;"
							v-model="new_passwd_confirm" />
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="btn" @click="confirm">保存</view>
		<safe-area></safe-area>
	</view>
</template>

<script>
	import {
		passwordUpdate,
	} from "@/api/call_kw.js";
	import _ from "lodash";
	export default {
		data() {
			return {
				old_passwd: '',
				new_passwd: '',
				new_passwd_confirm: '',
			}
		},
		methods: {
			// 点击保存
			confirm: _.debounce(function() {
				if (this.new_passwd !== this.new_passwd_confirm) {
					uni.showToast({
						icon: 'none',
						title: '请确保两次输入的新密码一致!',
					})
					return;
				}
				uni.showLoading({
					title: '提交中...',
				})
				passwordUpdate({
					old_passwd: this.old_passwd,
					new_passwd: this.new_passwd,
				}).then(res => {
					if (res.data?.result) {
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '修改成功!',
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '错误提示',
							content: res.data?.error?.data?.message || '修改失败!',
						})
					}
				})
			}, 300),
		},
	}
</script>

<style lang="scss" scoped>
	.passwordEdit {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.container {
			width: 100%;

			.label {
				margin: auto 0;
				color: black;
				font-size: 32rpx;
			}

			.sign-input {
				text-align: right;
			}
		}

		.btn {
			margin: auto 0 250rpx;
			width: 380rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background-color: #3F7CFB;
			line-height: 80rpx;
			text-align: center;
			color: white;
		}
	}
</style>